<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    	<link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
		<title>阿噹共享汽车-地勤车况系统</title>
		<link rel="stylesheet" href="libs/wuui/weui.min.css" />
		<style type="text/css">
		body, .weui-cell{
			color: #b2b2b2;
			font-size: 13px;
		}
		.page.pg-top{
			padding-top: 50px;
		}
		.page.pg-bottom{
			padding-bottom: 50px;
		}
		header {
			width: 100%;
			height: 50px;
			background: #01ace9;
			position: fixed;
			top: 0;
			z-index: 3;
		}
		header .back:before {
			content: " ";
			display: inline-block;
			height: 10px;
			width: 10px;
			border-width: 0 0 2px 2px;
			border-color: #fff;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		}
		
		header a.placeholder {
			display: block;
			padding: 0 20px
		}
		
		header .placeholder {
			margin: 0;
			height: 50px;
			line-height: 50px;
			background: none;
			font-size: 16px;
			color: #fff;
		}
		.detail .weui-panel__hd {
			padding: 7px 15px;
			background: #f8f8f8;
		}
		.detail .weui-panel__hd:after{
			left: 0;
		}
		
		.detail .pic .weui-media-box {
			padding: 0 0 15px;
		}
		
		.detail .pic p {
			padding: 5px 15px 0;
		}
		
		.detail .weui-panel img {
			width: 100%;
			height: auto;
		}
		
		
		.detail .weui-panel {
			margin-bottom: 0;
		}
		
		.detail .weui-btn_primary,
		.detail .weui-btn_plain-primary {
			width: 100%;
			font-size: 16px;
		}
		.weui-cells.uploader{
			margin-top: 0;
		}
		.weui-cells.uploader:before{
			border-top: 0px;
		}
		.uploader .weui-cell:before{
			left: 0;
		}
		.detail .weui-media-box__bd .loadImg {
			text-align: center;
		}
		.detail .weui-media-box__bd .loadImg .weui-loading{
			margin: 40px;
		}
		.uploader .weui-cell .textarea{
			border: 1px solid #d9d9d9;
			color:#333333;
		}
		#uploaderCustomBtn
		{
			margin-bottom: 20px;
			color: #333;
    		font-size: 16px;
			background:#d4f2fd;
		}
		#uploaderCustomBtn:active{
			background:#aae2f7;
		}
		</style>
	</head>

	<body ontouchstart>
		
		<header>
			<div class="weui-flex">
				<div><a id="titleCarNum" href="javascript:history.go(-1);" class="placeholder back">  </a></div>
			</div>
		</header>
		
		<div class="page pg-top detail ">
			<div class="page-bd">
				
				<!-- 处理前后图片、备注信息 -->
				<div class="weui-panel weui-panel_access">
					<div class="weui-panel__hd">新伤</div>
					<div class="weui-panel__bd pic">
						<div class="weui-media-box weui-media-box_appmsg">
							<div class="weui-media-box__bd">
								<div id="beforeImage" class="loadImg">
									<embed src="img/default.svg" style="width: 30px;height: 30px"/>
								</div>
								
								<p id="beforeDesc"></p>
								<p id="beforeTime" class="weui-media-box__desc"></p>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
        <div class="weui-cells weui-cells_form uploader">
        	
            <div class="weui-cell" id="uploaderCustom">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">处理后</p>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderCustomFiles"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderCustomInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell">
            	<div class="weui-cell__bd textarea">
                    <textarea name="afterDesc" class="weui-textarea" placeholder="备注信息..." rows="3"></textarea>
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
			</div>
			
        </div>
        
        <div class="weui-btn-area">
            <a id="uploaderCustomBtn" href="javascript:" class="weui-btn weui-btn_primary">上传</a>
        </div>

        <div class="weui-gallery" id="gallery"> 
			<span class="weui-gallery__img" id="galleryImg"></span> 
			<div class="weui-gallery__opr"> 
				<a href="javascript:" class="weui-gallery__del" style="display:none;"> 
					<i class="weui-icon-delete weui-icon_gallery-delete"></i> 
				</a> 
			</div> 
		</div>
		
		<script type="text/javascript" src="libs/jquery-2.2.3.min.js" charset="UTF-8"></script>
		<!--weui.js需要在body里面加载才起作用-->
		<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/app.js" charset="UTF-8"></script>
		<script type="text/javascript">
		(function(){
			/* 图片手动上传 */
			var uploadCustomFileList = [],
				uploadCount = 0,
				car = app.getJSONSessionStorage('car'),
				user = app.getJSONSessionStorage('user'),
				carStateId = app.getRequestParam('carStateId'),
				$beforeImage = $('#beforeImage'),
				uploadLoading = null,
				$titleCarNum = $('#titleCarNum'),
				$beforeDesc = $('#beforeDesc'),
				$beforeTime = $('#beforeTime'),
				$gallery = $("#gallery"),
    			$galleryImg = $("#galleryImg");

			$titleCarNum.html(car.carFullNum);
			
			$.ajax({
				type:"get",
				url:"/api/tukuan/mobile/car/state/get/"+carStateId,
				success: function(result){
					if(result) {
						$beforeDesc.html(undefined == result.beforeDesc || '' == result.beforeDesc ? '无备注' : result.beforeDesc) ;
						$beforeTime.html(result.beforeTime) ;
						app.loadImage(result.beforeImageUrl, function() {
    						$beforeImage.html(this);

    						//
    						$(this).on('click', function(){
    							// weui.gallery(this.src);	
    							//
    							 $galleryImg.attr("style", "background-image:url("+this.src+")");
					             $gallery.fadeIn(100);
					            //
					            	var viewport = document.querySelector("meta[name=viewport]");  
					            	viewport.setAttribute('content', 'width=device-width,initial-scale=1.0, user-scalable=1.0'); 
					            //
    						});
    						$gallery.on("click", function(){
					            $gallery.fadeOut(100);
					            var viewport = document.querySelector("meta[name=viewport]");  
					            viewport.setAttribute('content', 'width=device-width,initial-scale=1.0, user-scalable=1.0,minimum-scale=1.0, maximum-scale=1.0'); 
					        });
    					});
						$beforeImage.attr('src', result.beforeImageUrl) ;
					}
				},
				error: function(){
				}
			});

			// 这里是简单的调用，其余api请参考文档
			weui.uploader('#uploaderCustom', {
				url: '/api/tukuan/mobile/car/state/afterUpload',
				auto: false,
				compress: {
			       width: 800,
			       height: 600,
			       quality: .3
			   	},
				onBeforeQueued: function(files) {
			       	if(["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0){
			           	weui.alert('请上传图片');
			           	return false; 
			       	}
			       	if(this.size > 10 * 1024 * 1024){
			           	weui.alert('请上传不超过10M的图片');
			           	return false;
			       	}
			       	if (files.length > 1) { // 防止一下子选择过多文件
			           	weui.alert('最多只能上传5张图片，请重新选择');
			           	return false;
			       	}
			       	if (uploadCount + 1 > 1) {
			           	weui.alert('最多只能上传1张图片');
			           	return false;
			       	}
			       	++uploadCount;
			   	},
				onQueued: function() {
					uploadCustomFileList.push(this);
				},
			   	onBeforeSend: function(data, headers){
			   		var afterDesc = $('textarea[name=afterDesc]').val() ;
			       	$.extend(data, {
			       		id: carStateId,
			       		afterUserId: user.id,
			       		carId: car.id,
			       		afterDesc: afterDesc
					});
					uploadLoading = weui.loading('上传中请稍等');
			   	},
			   	onSuccess: function (ret) {
			   		uploadLoading.hide() ;
			       	if(ret.status) {
			    		window.location.href = 'msg.html?backUrl=index.html&status=1&backTitle='+encodeURI('返回主页') ;
			       	} else {
			       		window.location.href = 'msg.html?status=2&backTitle='+encodeURI('返回')+'&message='+encodeURI('文件上传失败') ;
			       	}
			   	},
			   	onError: function(err){
			   		uploadLoading.hide() ;
			       	console.log(this, err);
			   	}
			});
			
			
			// 手动上传按钮
			document.getElementById("uploaderCustomBtn").addEventListener('click', function(){
				if(uploadCustomFileList.length == 0) {
					weui.alert('请选择要上传的图片');
				}
			    uploadCustomFileList.forEach(function(file){
			        file.upload();
			    });
			    
			});
			
			// 缩略图预览
			document.querySelector('#uploaderCustomFiles').addEventListener('click', function(e){
			    var target = e.target;
			
			    while(!target.classList.contains('weui-uploader__file') && target){
			        target = target.parentNode;
			    }
			    if(!target) return;
			
			    var url = target.getAttribute('style') || '';
			    var id = target.getAttribute('data-id');
			
			    if(url){
			        url = url.match(/url\((.*?)\)/)[1];
			    }
			    var gallery = weui.gallery(url, {
			        onDelete: function(){
			        	uploadCount--;
			            weui.confirm('确定删除该图片？', function(){
			            	
			            	
			                var index;
			                for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
			                    var file = uploadCustomFileList[i];
			                    if(file.id == id){
			                        index = i;
			                        break;
			                    }
			                }
			                if(index != undefined) {
			                	uploadCustomFileList.splice(index, 1);
			                }
			                target.remove();
			                gallery.hide();
			            });
			        }
			    });
			});
			
			
		})();
		</script>
	</body>

</html>